import React, { PureComponent } from 'react';
import { connect } from 'dva';
import Link from 'umi/link';
import router from 'umi/router';
import moment from 'moment';
import { 
	Card, 
	Row, 
	Col, 
	Icon, 
	Avatar, 
	Tag, 
	Divider, 
	Spin, 
	Input,
	Tabs,
	Form,
	DatePicker,
	Select,
	TreeSelect,
	AutoComplete,
	Button,
	Upload
} from 'antd';
import defaultAvatar from '@/assets/default_avatar.png';
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from './ProUserList.less';
const { TabPane } = Tabs;
const FormItem = Form.Item;
const { Option } = AutoComplete;
const { TextArea } = Input;
@connect(({ loading, user, project }) => ({
  listLoading: loading.effects['list/fetch'],
  currentUser: user.currentUser,
  currentUserLoading: loading.effects['user/fetchCurrent'],
  project,
  projectLoading: loading.effects['project/fetchNotice'],
}))
@Form.create()
class StaffViewForm extends PureComponent {
  state = {
    newTags: [],
    inputVisible: false,
    inputValue: '',
    imageUrl: defaultAvatar,
  };

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'user/fetchCurrent',
    });
    dispatch({
      type: 'list/fetch',
      payload: {
        count: 8,
      },
    });
    dispatch({
      type: 'project/fetchNotice',
    });
  }

  onTabChange = key => {
    const { match } = this.props;
    switch (key) {
      case 'articles':
        router.push(`${match.url}/articles`);
        break;
      case 'applications':
        router.push(`${match.url}/applications`);
        break;
      case 'projects':
        router.push(`${match.url}/projects`);
        break;
      default:
        break;
    }
  };

  showInput = () => {
    this.setState({ inputVisible: true }, () => this.input.focus());
  };

  saveInputRef = input => {
    this.input = input;
  };

  handleInputChange = e => {
    this.setState({ inputValue: e.target.value });
  };

  handleInputConfirm = () => {
    const { state } = this;
    const { inputValue } = state;
    let { newTags } = state;
    if (inputValue && newTags.filter(tag => tag.label === inputValue).length === 0) {
      newTags = [...newTags, { key: `new-${newTags.length}`, label: inputValue }];
    }
    this.setState({
      newTags,
      inputVisible: false,
      inputValue: '',
    });
  };
  
  //修改人员信息
  handleUpdateSubmit = () => {
		const { form } = this.props;
		form.validateFields((err, fieldsValue) => {
			if (err) return;
			form.resetFields();
			message.success('修改成功');
		});
	};
  
  				beforeUpload = file => {
					console.log(file);
					
					this.setState({
			        file:file,
				  });

					if(window.FileReader) {
				      const reader = new FileReader();
				      
				      reader.readAsDataURL(file);
				      
						  reader.addEventListener('load', () => {
						  	console.log(reader.result);
						  	this.setState({
					          imageUrl:reader.result,
					          loading: false,
					      	})
		
						  });
					}

				  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
				  if (!isJpgOrPng) {
				    message.error('You can only upload JPG/PNG file!');
				  }
				  const isLt2M = file.size / 1024 / 1024 < 2;
				  if (!isLt2M) {
				    message.error('Image must smaller than 2MB!');
				  }
				  return isJpgOrPng && isLt2M;
				}

  render() {
    const { newTags, inputVisible, inputValue } = this.state;
		const uploadButton = (
      <div style={{marginTop: '30px'}}>
      	<svg className={`${styles.icon} ${styles.staffPhoto}` } aria-hidden="true">
          <use xlinkHref="#icon-shangchuanzhaopian"></use>
        </svg>
        <div className="ant-upload-text">上传照片</div>
      </div>
    );
	const { imageUrl } = this.state;
    const {
      listLoading,
      currentUser,
      currentUserLoading,
      project: { notice },
      projectLoading,
      match,
      location,
      children,
      form
    } = this.props;
    //人员类别
		const personType = [
		  {
		    title: '综合管理类公务员',
		    value: '0',
		    key: '0',
		    children: [
		      {
		        title: '综合管理警官',
		        value: '0-1',
		        key: '0-1',
		      },
		      {
		        title: '综合管理警员',
		        value: '0-2',
		        key: '0-2',
		      },
		      {
		        title: '其他综合管理人员',
		        value: '0-3',
		        key: '0-3',
		      },
		    ],
		  },
		  {
		    title: '专业技术类公务员',
		    value: '1',
		    key: '1',
		    children: [
		      {
		        title: '警务技术警官',
		        value: '1-1',
		        key: '1-1',
		      },
		      {
		        title: '警务技术警员',
		        value: '1-2',
		        key: '1-2',
		      },
		    ],
		  },
		  {
		    title: '行政执法类公务员',
		    value: '2',
		    key: '2',
		    children: [
		      {
		        title: '执法勤务警官',
		        value: '2-1',
		        key: '2-1',
		      },
		      {
		        title: '执法勤务警员',
		        value: '2-2',
		        key: '2-2',
		      },
		    ],
		  },
		  {
		    title: '参照管理的机关工作人员',
		    value: '3',
		    key: '3',
		  },
		  {
		    title: '参照管理的事业工作人员',
		    value: '4',
		    key: '4',
		  },
		  {
		    title: '事业单位管理人员',
		    value: '5',
		    key: '5',
		  },
		  {
		    title: '事业单位技术人员',
		    value: '6',
		    key: '6',
		  },
		];
    //籍贯
		const nativePlace = [
		  {
		    title: '籍贯',
		    value: '籍贯',
		    key: '0-0',
		    children: [
		      {
		        title: 'Child Node1',
		        value: 'Child Node1',
		        key: '0-0-1',
		      },
		      {
		        title: 'Child Node2',
		        value: 'Child Node2',
		        key: '0-0-2',
		      },
		    ],
		  },
		  {
		    title: 'Node2',
		    value: 'Node2',
		    key: '0-1',
		  },
		];
    //健康状况
		const healthCondition = [
		  {
		    title: '健康',
		    value: '0',
		    key: '0',
		    children: [
		      {
		        title: '健康或良好',
		        value: '0-1',
		        key: '0-1',
		      },
		    ],
		  },
		  {
		    title: '一般',
		    value: '1',
		    key: '1',
		    children: [
		      {
		        title: '一般或较弱',
		        value: '1-1',
		        key: '1-1',
		      },
		    ],
		  },
		  {
		    title: '有病',
		    value: '2',
		    key: '2',
		    children: [
		      {
		        title: '有慢性病',
		        value: '2-1',
		        key: '2-1',
		      },
		      {
		        title: '心血管病',
		        value: '2-2',
		        key: '2-2',
		      },
		      {
		        title: '脑血管病',
		        value: '2-3',
		        key: '2-3',
		      },
		      {
		        title: '慢性呼吸系统病',
		        value: '2-4',
		        key: '2-4',
		      },
		      {
		        title: '慢性消化系统病',
		        value: '2-5',
		        key: '2-5',
		      },
		    ],
		  },
		  {
		    title: '有生理缺陷',
		    value: '3',
		    key: '3',
		    children: [
		      {
		        title: '有生理缺陷',
		        value: '3-1',
		        key: '3-1',
		      },
		      {
		        title: '聋哑',
		        value: '3-2',
		        key: '3-2',
		      },
		      {
		        title: '盲人',
		        value: '3-3',
		        key: '3-3',
		      },
		      {
		        title: '高度近视',
		        value: '3-4',
		        key: '3-4',
		      },
		      {
		        title: '其它缺陷',
		        value: '3-5',
		        key: '3-5',
		      },
		    ],
		  },
		  {
		    title: '残废',
		    value: '4',
		    key: '4',
		    children: [
		      {
		        title: '伤残',
		        value: '4-1',
		        key: '4-1',
		      },
		      {
		        title: '特等伤残',
		        value: '4-2',
		        key: '4-2',
		      },
		      {
		        title: '一等伤残',
		        value: '4-3',
		        key: '4-3',
		      },
		      {
		        title: '二级甲等伤残',
		        value: '4-4',
		        key: '4-4',
		      },
		      {
		        title: '二级乙等伤残',
		        value: '4-5',
		        key: '4-5',
		      },
		    ],
		  },
		];
    //婚姻状况
		const marriageCondition = [
		  {
		    title: '未婚',
		    value: '0',
		    key: '0',
		  },
		  {
		    title: '已婚',
		    value: '1',
		    key: '1',
		    children: [
		      {
		        title: '初婚',
		        value: '1-1',
		        key: '1-1',
		      },
		      {
		        title: '再婚',
		        value: '1-2',
		        key: '1-2',
		      },
		      {
		        title: '复婚',
		        value: '1-3',
		        key: '1-3',
		      },
		    ],
		  },
		  {
		    title: '丧偶',
		    value: '2',
		    key: '2',
		  },
		  {
		    title: '离婚',
		    value: '3',
		    key: '3',
		  },
		  {
		    title: '未说明',
		    value: '4',
		    key: '4',
		  },
		];
    //户籍所在地
		const domicilePlace = [
		  {
		    title: '户籍所在地',
		    value: '户籍所在地',
		    key: '0-0',
		    children: [
		      {
		        title: 'Child Node1',
		        value: 'Child Node1',
		        key: '0-0-1',
		      },
		      {
		        title: 'Child Node2',
		        value: 'Child Node2',
		        key: '0-0-2',
		      },
		    ],
		  },
		  {
		    title: 'Node2',
		    value: 'Node2',
		    key: '0-1',
		  },
		];
    //出生地
		const birthPlace = [
		  {
		    title: '出生地',
		    value: '出生地',
		    key: '0-0',
		    children: [
		      {
		        title: 'Child Node1',
		        value: 'Child Node1',
		        key: '0-0-1',
		      },
		      {
		        title: 'Child Node2',
		        value: 'Child Node2',
		        key: '0-0-2',
		      },
		    ],
		  },
		  {
		    title: 'Node2',
		    value: 'Node2',
		    key: '0-1',
		  },
		];
		//最高学历
		const firstEdu = [
		  {
		    title: '研究生教育',
		    value: '0',
		    key: '0',
		    children: [
		      {
		        title: '博士研究生',
		        value: '0-1',
		        key: '0-1',
		      },
		      {
		        title: '硕士研究生',
		        value: '0-2',
		        key: '0-2',
		      },
		      {
		        title: '研究生班',
		        value: '0-3',
		        key: '0-3',
		      },
		      {
		        title: '中央党校研究生',
		        value: '0-4',
		        key: '0-4',
		      },
		      {
		        title: '省(区、市)委党校研究生',
		        value: '0-4',
		        key: '0-4',
		      },
		    ],
		  },
		  {
		    title: '本科教育',
		    value: '1',
		    key: '1',
		    children: [
		      {
		        title: '大学',
		        value: '1-1',
		        key: '1-1',
		      },
		      {
		        title: '中央党校大学',
		        value: '1-2',
		        key: '1-2',
		      },
		      {
		        title: '省(区、市)委党校大学',
		        value: '1-3',
		        key: '1-3',
		      },
		    ],
		  },
		  {
		    title: '专科教育',
		    value: '2',
		    key: '2',
		    children: [
		      {
		        title: '大专',
		        value: '2-1',
		        key: '2-1',
		      },
		      {
		        title: '中央党校大专',
		        value: '2-2',
		        key: '2-2',
		      },
		      {
		        title: '省(区、市)委党校大专',
		        value: '2-3',
		        key: '2-3',
		      },
		      {
		        title: '大学普通班',
		        value: '2-4',
		        key: '2-4',
		      },
		    ],
		  },
		  {
		    title: '中专',
		    value: '3',
		    key: '3',
		  },
		  {
		    title: '中技',
		    value: '4',
		    key: '4',
		  },
		  {
		    title: '高中',
		    value: '5',
		    key: '5',
		  },
		  {
		    title: '初中',
		    value: '6',
		    key: '6',
		  },
		  {
		    title: '小学',
		    value: '7',
		    key: '7',
		  },
		];
		//人员所属部门与警种
		const staffPolice = [
		  {
		    title: '公安机关与公安分局[A0000]',
		    value: '0',
		    key: '0',
		    children: [
		      {
		        title: '公安部[A0100]',
		        value: '0-1',
		        key: '0-1',
		      },
		      {
		        title: '公安厅[A0200]',
		        value: '0-2',
		        key: '0-2',
		      },
		      {
		        title: '直辖市公安局[A0300]',
		        value: '0-3',
		        key: '0-3',
		      },
		      {
		        title: '副省级市公安局[A0400]',
		        value: '0-4',
		        key: '0-4',
		      },
		      {
		        title: '地级市公安局[A0500]',
		        value: '0-5',
		        key: '0-5',
		      },
		    ],
		  },
		  {
		    title: '警种和部门[B0000]',
		    value: '1',
		    key: '1',
		    children: [
		      {
		        title: '移民管理[B0100]',
		        value: '1-1',
		        key: '1-1',
		        children: [
			      {
			        title: '边境管理[B0101]',
			        value: '1-1-1',
			        key: '1-1-1',
			      },
			      {
			        title: '边防检查[B0102]',
			        value: '1-1-2',
			        key: '1-1-2',
			      },
			      {
			        title: '遣返管理[B0103]',
			        value: '1-1-3',
			        key: '1-1-3',
			      },
			      {
			        title: '其他[B0199]',
			        value: '1-1-4',
			        key: '1-1-4',
			      },
			    ],
		      },
		      {
		        title: '办公室[B0200]',
		        value: '1-2',
		        key: '1-2',
		        children: [
			      {
			        title: '机要文电[B0201]',
			        value: '1-2-1',
			        key: '1-2-1',
			      },
			      {
			        title: '督办[B0202]',
			        value: '1-2-2',
			        key: '1-2-2',
			      },
			      {
			        title: '保密[B0203]',
			        value: '1-2-3',
			        key: '1-2-3',
			      },
			      {
			        title: '其他[B0299]',
			        value: '1-2-4',
			        key: '1-2-4',
			      },
			    ],
		      },
		      {
		        title: '情报指挥[B0300]',
		        value: '1-3',
		        key: '1-3',
		        children: [
			      {
			        title: '情报信息[B0301]',
			        value: '1-3-1',
			        key: '1-3-1',
			      },
			      {
			        title: '指挥中心[B0302]',
			        value: '1-3-2',
			        key: '1-3-2',
			      },
			    ],
		      },
		      {
		        title: '研究室[B0400]',
		        value: '1-4',
		        key: '1-4',
		      },
		      {
		        title: '督察审计[B0500]',
		        value: '1-5',
		        key: '1-5',
		        children: [
			      {
			        title: '督察[B0501]',
			        value: '1-5-1',
			        key: '1-5-1',
			      },
			      {
			        title: '审计[B0502]',
			        value: '1-5-2',
			        key: '1-5-2',
			      },
			      {
			        title: '信访[B0503]',
			        value: '1-5-3',
			        key: '1-5-3',
			      },
			      {
			        title: '其他[B0599]',
			        value: '1-5-4',
			        key: '1-5-4',
			      },
			    ],
		      },
		    ],
		  },
		];
		//职务类别
		const postType = [
		  {
		    title: '综合管理类',
		    value: '0',
		    key: '0',
		    children: [
		      {
		        title: '综合管理警官',
		        value: '0-1',
		        key: '0-1',
		      },
		      {
		        title: '综合管理警员',
		        value: '0-2',
		        key: '0-2',
		      },
		    ],
		  },
		  {
		    title: '执法勤务类',
		    value: '1',
		    key: '1',
		    children: [
		      {
		        title: '执法勤务警官',
		        value: '1-1',
		        key: '1-1',
		      },
		      {
		        title: '执法勤务警员',
		        value: '1-2',
		        key: '1-2',
		      },
		    ],
		  },
		  {
		    title: '警务技术类',
		    value: '2',
		    key: '2',
		    children: [
		      {
		        title: '警务技术警官',
		        value: '2-1',
		        key: '2-1',
		      },
		      {
		        title: '警务技术警员',
		        value: '2-2',
		        key: '2-2',
		      },
		    ],
		  },
		];
		//人员工作岗位
		const workPost = [
		  {
		    title: '单位领导',
		    value: '0',
		    key: '0',
		  },
		  {
		    title: '政工类',
		    value: '1',
		    key: '1',
		    children: [
		      {
		        title: '人事',
		        value: '1-1',
		        key: '1-1',
		      },
		      {
		        title: '组织',
		        value: '1-2',
		        key: '1-2',
		      },
		      {
		        title: '宣传',
		        value: '1-3',
		        key: '1-3',
		      },
		      {
		        title: '培训',
		        value: '1-4',
		        key: '1-4',
		      },
		      {
		        title: '文体',
		        value: '1-5',
		        key: '1-5',
		      },
		    ],
		  },
		  {
		    title: '综合类',
		    value: '2',
		    key: '2',
		    children: [
		      {
		        title: '信息指挥',
		        value: '2-1',
		        key: '2-1',
		      },
		      {
		        title: '调研',
		        value: '2-2',
		        key: '2-2',
		      },
		      {
		        title: '统计',
		        value: '2-3',
		        key: '2-3',
		      },
		      {
		        title: '档案',
		        value: '2-4',
		        key: '2-4',
		      },
		      {
		        title: '信访',
		        value: '2-5',
		        key: '2-5',
		      },
		    ],
		  },
		  {
		    title: '后勤类',
		    value: '3',
		    key: '3',
		    children: [
		      {
		        title: '财会',
		        value: '3-1',
		        key: '3-1',
		      },
		      {
		        title: '基建',
		        value: '3-2',
		        key: '3-2',
		      },
		      {
		        title: '装备',
		        value: '3-3',
		        key: '3-3',
		      },
		    ],
		  },
		  {
		    title: '纪检类',
		    value: '4',
		    key: '4',
		    children: [
		      {
		        title: '纪检',
		        value: '4-1',
		        key: '4-1',
		      },
		      {
		        title: '监察',
		        value: '4-2',
		        key: '4-2',
		      },
		      {
		        title: '审计',
		        value: '4-3',
		        key: '4-3',
		      },
		      {
		        title: '督察',
		        value: '4-4',
		        key: '4-4',
		      },
		    ],
		  },
		];
    const operationTabList = [
      {
        key: 'articles',
        tab: (
          <span>
        基本信息<span style={{ fontSize: 14 }}>(8)</span>
          </span>
        ),
      },
      {
        key: 'applications',
        tab: (
          <span>
            应用 <span style={{ fontSize: 14 }}>(8)</span>
          </span>
        ),
      },
      {
        key: 'projects',
        tab: (
          <span>
            项目 <span style={{ fontSize: 14 }}>(8)</span>
          </span>
        ),
      },
    ];
	
	const tags = [
		{key: "0", label: "汉族"},
		{key: "1", label: "男"},
		{key: "2", label: "未婚"},
		{key: "3", label: "中共党员"},
		{key: "4", label: "博士研究生"},
	]
	
    return (
    <PageHeaderWrapper title="查看人员信息">
    	<Button type="danger" className={styles.closeBaseinfo} onClick={() => router.push(`/policerank/staffselect`)}>
		 关闭
		</Button>
      <GridContent className={styles.userCenter}>
        <Row gutter={24}>
          <Col lg={7} md={24}>
            <Card bordered={false} style={{ marginBottom: 24 }} loading={currentUserLoading}>
              {currentUser && Object.keys(currentUser).length ? (
                <div>
                  <div className={styles.avatarHolder}>
                    <img alt="" src={defaultAvatar} />
                    <div className={styles.name}>陈某</div>
                    <div>综合管理警官</div>
                  </div>
                  <div className={styles.detail}>
                    <p>
                      <i className={styles.title} />
                      	主任科员
                    </p>
                    <p>
                      <i className={styles.group} />
                      	内蒙古自治区呼和浩特公安局
                    </p>
                    <p>
                      <i className={styles.address} />
                      	内蒙古自治区呼和浩特市
                    </p>
                  </div>
                  <Divider dashed />
                  <div className={styles.tags}>
                    <div className={styles.tagsTitle}>标签</div>
                    {tags.concat(newTags).map(item => (
                      <Tag key={item.key}>{item.label}</Tag>
                    ))}
                  </div>
                  <Divider style={{ marginTop: 16 }} dashed />
                  <div className={styles.team}>
                    <div className={styles.teamTitle}>人事关系</div>
                    <Spin spinning={projectLoading}>
                    	<div style={{marginBottom: '10px'}}><Tag color="#108ee9">工作单位</Tag>内蒙古自治区呼和浩特公安局</div>
                    	<div style={{marginBottom: '10px'}}><Tag color="#108ee9">单位代码</Tag>150000000000</div>
                    	<div style={{marginBottom: '10px'}}><Tag color="#108ee9">统计关系所在单位</Tag>内蒙古自治区呼和浩特公安局</div>
                    	<div style={{marginBottom: '10px'}}><Tag color="#108ee9">人员所属部门与警种</Tag>公安部</div>
                    	<div style={{marginBottom: '10px'}}><Tag color="#108ee9">人员工作岗位</Tag>单位领导</div>
                    </Spin>
                  </div>
                </div>
              ) : (
                'loading...'
              )}
            </Card>
          </Col>
          <Col lg={17} md={24}>
            <Card
              className={styles.tabsCard}
              bordered={false}
              onTabChange={this.onTabChange}
              loading={listLoading}
            >
            <Form  layout="vertical">
	
    						<Tabs defaultActiveKey="1">
    							<TabPane tab="基本信息" key="1">
									    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
									
									        <Col  md={18} sm={24}>
										        <FormItem  label="姓名" style={{width: '45%',display:"inline-block",marginRight: "30px"}}>
										            {form.getFieldDecorator('name', {
										            rules: [{ required: true, message: '请输入姓名！'}],
										            initialValue: "陈某",
										            })(<Input placeholder="请输入" />)}
										        </FormItem>
										        <FormItem  label="性别" style={{width: '45%',display:"inline-block"}}>
										            {form.getFieldDecorator('sex', {
										            rules: [{ required: true, message: '请选择性别！'}],
										            initialValue: "男",
										            })( 
									            	<AutoComplete  	
									            		filterOption={(inputValue, option) =>
														        option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
														      }
									            		style={{ width: '100%' }} 
									            		placeholder="请选择"
														      >
														      <Option value="未知性别">未知性别</Option>
														      <Option value="男">男</Option>
														      <Option value="女">女</Option>
														      <Option value="女性改变为男性">女性改变为男性</Option>
														      <Option value="男性改变为女性">男性改变为女性</Option>
														      <Option value="未说明的性别">未说明的性别</Option>
														    </AutoComplete>
													    )}
										        </FormItem>
										        <FormItem  label="民族" style={{width: '45%',display:"inline-block",marginRight: "30px"}}>
										            {form.getFieldDecorator('nation', {
										            rules: [{ required: true, message: '请选择民族！'}],
										            initialValue: "汉族",
										            })(    
											            	<AutoComplete
											            	filterOption={(inputValue, option) =>
																        option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
																      }
											            		style={{ width: '100%' }} 
											            		placeholder="请选择"
											            	>
																      <Option value="汉族">汉族</Option>
																      <Option value="蒙古族">蒙古族</Option>
																      <Option value="回族">回族</Option>
																      <Option value="藏族">藏族</Option>
																      <Option value="维吾尔族">维吾尔族</Option>
																      <Option value="苗族">苗族</Option>
																      <Option value="彝族">彝族</Option>
																      <Option value="壮族">壮族</Option>
																      <Option value="布依族">布依族</Option>
																      <Option value="朝鲜族">朝鲜族</Option>
																      <Option value="满族">满族</Option>
																      <Option value="白族">白族</Option>
																      <Option value="土家族">土家族</Option>
																    </AutoComplete>
															    )}
										        </FormItem>
										        <FormItem  label="人员类别" style={{width: '45%',display:"inline-block"}}>
										            {form.getFieldDecorator('person_type', {
										            rules: [{ required: true, message: '请选择人员类别！'}],
										            initialValue: "0-1",
										            })(    
													      <TreeSelect
													      	showSearch
													        style={{ width: '100%' }}
													        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
													        treeData={personType}
													        placeholder="请选择"
													        filterTreeNode={(input, treeNode) => 
													        	treeNode.props.title.toLowerCase().indexOf(input.toLowerCase()) >= 0
													        }
													      />
												    )}
										        </FormItem>
									        </Col>
									        <Col  md={6} sm={24} style={{marginTop: '18px'}}>
												<Upload 
											        listType="picture-card"
											        className="avatar-uploader"
											        showUploadList={false}
											        beforeUpload={this.beforeUpload}
											        style={{display: 'table',width:'120px',height: '140px'}}
											      >
											        {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%',height: '130px' }} /> : uploadButton}
											      </Upload>
									        </Col>
									
									    </Row>
									    
									    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
									
									        <Col  md={12} sm={24}>
										        <FormItem  label="警号">
										            {form.getFieldDecorator('police_num', {
										            rules: [{ required: true, message: '请输入警号！'}],
										            initialValue: "110000000000",
										            })(<Input placeholder="请输入" />)}
										        </FormItem>
									        </Col>
									        <Col  md={12} sm={24}>
										        <FormItem  label="居民身份证号码">
										            {form.getFieldDecorator('idcard', {
										            rules: [{ required: true, message: '请输入居民身份证号码！'}],
										            initialValue: "130924196805073214",
										            })(<Input placeholder="请输入" />)}
										        </FormItem>
									        </Col>
									
									    </Row>
									    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
									
									        <Col  md={12} sm={24}>
										        <FormItem  label="籍贯">
										            {form.getFieldDecorator('native_place', {
										            rules: [{ required: true, message: '请输入籍贯！'}],
										            initialValue: "河北省保定市",
										            })(<Input placeholder="请输入" />)}
										        </FormItem>
									        </Col>
									        <Col  md={12} sm={24}>
										        <FormItem  label="健康状况">
										            {form.getFieldDecorator('health_condition', {
										            rules: [{ required: true, message: '请选择健康状况！'}],
										            initialValue: "0",
										            })(    
													      <TreeSelect
													      	showSearch
													        style={{ width: '100%' }}
													        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
													        treeData={healthCondition}
													        placeholder="请选择"
													        filterTreeNode={(input, treeNode) => 
													        	treeNode.props.title.toLowerCase().indexOf(input.toLowerCase()) >= 0
													        }
													      />
												    )}
										        </FormItem>
									        </Col>
									
									    </Row>
									    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
									
									        <Col  md={12} sm={24}>
										        <FormItem  label="婚姻状况">
										            {form.getFieldDecorator('marriage_condition', {
										            rules: [{ required: true, message: '请选择婚姻状况！'}],
										            initialValue: "1",
										            })(    
													      <TreeSelect
													      	showSearch
													        style={{ width: '100%' }}
													        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
													        treeData={marriageCondition}
													        placeholder="请选择"
													        filterTreeNode={(input, treeNode) => 
													        	treeNode.props.title.toLowerCase().indexOf(input.toLowerCase()) >= 0
													        }
													      />
												    )}
										        </FormItem>
									        </Col>
									        <Col  md={12} sm={24}>
										        <FormItem  label="血型">
										            {form.getFieldDecorator('blood_type', {
										            rules: [{ required: true, message: '请选择血型！'}],
										            initialValue: "A",
										            })(    
													    <Select showSearch style={{ width: '100%' }} placeholder="请选择">
														      <Option value="A">A</Option>
														      <Option value="B">B</Option>
														      <Option value="O">O</Option>
														      <Option value="AB">AB</Option>
														      <Option value="RH-">RH-</Option>
														      <Option value="RH+">RH+</Option>
														      <Option value="其他">其他</Option>
													    </Select>
												    )}
										        </FormItem>
									        </Col>
									
									    </Row>
									    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
									
									        <Col  md={12} sm={24}>
										        <FormItem  label="涉密标志">
										            {form.getFieldDecorator('secret_sign', {
										            rules: [{ required: true, message: '请选择涉密标志！'}],
										            initialValue: "否",
										            })(    
													     <Select showSearch style={{ width: '100%' }} placeholder="请选择">
														      <Option value="空">空</Option>
														      <Option value="否">否</Option>
														      <Option value="是">是</Option>
													    </Select>
												    )}
										        </FormItem>
									        </Col>
									        <Col  md={12} sm={24}>
										        <FormItem  label="警员库标志">
										            {form.getFieldDecorator('police_sign', {
										            rules: [{ required: true, message: '请选择警员库标志！'}],
										            initialValue: "是",
										            })(    
													     <Select showSearch style={{ width: '100%' }} placeholder="请选择">
														      <Option value="空">空</Option>
														      <Option value="否">否</Option>
														      <Option value="是">是</Option>
													    </Select>
												    )}
										        </FormItem>
									        </Col>
									
									    </Row>
									    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
									
									        <Col  md={12} sm={24}>
										        <FormItem  label="政治面貌">
										            {form.getFieldDecorator('politic_face', {
										            rules: [{ required: true, message: '请选择政治面貌！'}],
										            initialValue: "中共党员",
										            })(    
													    <Select showSearch style={{ width: '100%' }} placeholder="请选择">
														      <Option value="中共党员">中共党员</Option>
														      <Option value="预备党员">预备党员</Option>
														      <Option value="共青团员">共青团员</Option>
														      <Option value="民革">民革</Option>
														      <Option value="民盟">民盟</Option>
														      <Option value="民建">民建</Option>
														      <Option value="民进">民进</Option>
														      <Option value="农工党">农工党</Option>
														      <Option value="致公党">致公党</Option>
														      <Option value="九三学社">九三学社</Option>
														      <Option value="台盟">台盟</Option>
														      <Option value="无党派">无党派</Option>
														      <Option value="群众">群众</Option>
													    </Select>
												    )}
										        </FormItem>
									        </Col>
									       	<Col  md={12} sm={24}>
										        <FormItem  label="参加组织日期">
										            {form.getFieldDecorator('approve_time', {
										            	rules: [{ required: true, message: '请选择参加组织日期！'}],
										            	initialValue: moment('1996-07-24'),
										            })
										            (<DatePicker format="YYYY-MM-DD" style={{ width: '100%' }} placeholder="请选择"/>)}
										        </FormItem>
									        </Col>
									
									    </Row>
									    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
									
									        <Col  md={12} sm={24}>
										        <FormItem  label="户籍所在地">
										            {form.getFieldDecorator('domicile_place', {
										            rules: [{ required: true, message: '请输入户籍所在地！'}],
										            initialValue: '河北省保定市',
										            })(<Input placeholder="请输入" />)}
										        </FormItem>
									        </Col>
									        <Col  md={12} sm={24}>
										        <FormItem  label="出生地">
										            {form.getFieldDecorator('birth_place', {
										            rules: [{ required: true, message: '请输入出生地！'}],
										            initialValue: '河北省保定市',
										            })(<Input placeholder="请输入" />)}
										        </FormItem>
									        </Col>
									
									    </Row>
									    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
									
									        <Col  md={12} sm={24}>
										        <FormItem  label="成长地">
										            {form.getFieldDecorator('growup_place', {
										            rules: [{ required: false, message: '请输入成长地！'}],
										            initialValue: '河北省保定市',
										            })(<Input placeholder="请输入" />)}
										        </FormItem>
									        </Col>
									        <Col  md={12} sm={24}>
										        <FormItem  label="户籍所在详细地址">
										            {form.getFieldDecorator('hjxx_place')(<Input placeholder="请输入" />)}
										        </FormItem>
									        </Col>
									
									    </Row>
									    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
													<Col  md={12} sm={24}>
										        <FormItem  label="职务">
										            {form.getFieldDecorator('post',{
										            	initialValue: '主任科员',
										            })(<Input placeholder="请输入" />)}
										        </FormItem>
									        </Col>
									        <Col  md={12} sm={24}>
										        <FormItem  label="职务类别">
										            {form.getFieldDecorator('post_type', {
										            rules: [{ required: true, message: '请选择职务类别！'}],
										            })(	
							            				<TreeSelect
							            					showSearch
													        style={{ width: '100%' }}
													        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
													        treeData={postType}
													        placeholder="请选择"
													        filterTreeNode={(input, treeNode) => 
													        	treeNode.props.title.toLowerCase().indexOf(input.toLowerCase()) >= 0
													        }
													    />
													)}
										        </FormItem>
									        </Col>
									    </Row>
									    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
									
									        <Col  md={12} sm={24}>
										        <FormItem  label="最高学历">
										            {form.getFieldDecorator('first_edu', {
										            rules: [{ required: false, message: '请选择最高学历！'}],
										            })(	
									            		<TreeSelect
									            			showSearch
													        style={{ width: '100%' }}
													        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
													        treeData={firstEdu}
													        placeholder="请选择"
													        filterTreeNode={(input, treeNode) => 
													        	treeNode.props.title.toLowerCase().indexOf(input.toLowerCase()) >= 0
													        }
													    />
													)}
										        </FormItem>
									        </Col>
									        <Col  md={12} sm={24}>
										        <FormItem  label="测试">
										            {form.getFieldDecorator('test')(<Input placeholder="请输入" />)}
										        </FormItem>
									        </Col>
									
									    </Row>
									</TabPane>
    							<TabPane tab="工作信息" key="2">
									    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
									       	<Col  md={12} sm={24}>
										        <FormItem  label="参加工作日期">
										            {form.getFieldDecorator('work_date', {
										            	rules: [{ required: true, message: '请选择参加工作日期！'}],
										            })
										            (<DatePicker format="YYYY-MM-DD" style={{ width: '100%' }} placeholder="请选择"/>)}
										        </FormItem>
									        </Col>
									       	<Col  md={12} sm={24}>
										        <FormItem  label="参加公安工作日期">
										            {form.getFieldDecorator('policework_date', {
										            	rules: [{ required: true, message: '请选择参加公安工作日期！'}],
										            })
										            (<DatePicker format="YYYY-MM-DD" style={{ width: '100%' }} placeholder="请选择"/>)}
										        </FormItem>
									        </Col>
									
									    </Row>
									    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
									        <Col  md={12} sm={24}>
										        <FormItem  label="基层工作经历时间">
										            {form.getFieldDecorator('basicwork_time',{
										            	rules: [{ required: true, message: '请输入基层工作经历时间！'}],
										            })(<Input placeholder="请输入" />)}
										        </FormItem>
									        </Col>
									        <Col  md={12} sm={24}>
										        <FormItem  label="警衔应加学制年限">
										            {form.getFieldDecorator('policerank_year',{
										            	rules: [{ required: true, message: '请输入警衔应加学制年限！'}],
										            })(<Input placeholder="请输入" />)}
										        </FormItem>
									        </Col>
									
									    </Row>
									    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
									       	<Col  md={12} sm={24}>
										        <FormItem  label="进入公务员队伍时间">
										            {form.getFieldDecorator('policework_date', {
										            	rules: [{ required: true, message: '请选择参加公安工作日期！'}],
										            })
										            (<DatePicker format="YYYY-MM-DD" style={{ width: '100%' }} placeholder="请选择"/>)}
										        </FormItem>
									        </Col>
									
									    </Row>
									</TabPane>
    							<TabPane tab="人事关系" key="3">
									    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
									
									        <Col  md={12} sm={24}>
										        <FormItem  label="工作单位名称">
										            {form.getFieldDecorator('company_name', {
										            rules: [{ required: true, message: '请输入工作单位名称！'}],
										            })(<Input readOnly placeholder="请输入" />)}
										        </FormItem>
									        </Col>
									        <Col  md={12} sm={24}>
										        <FormItem  label="单位代码">
										            {form.getFieldDecorator('company_code', {
										            rules: [{ required: true, message: '请输入单位代码！'}],
										            })(<Input readOnly placeholder="请输入" />)}
										        </FormItem>
									        </Col>
									
									    </Row>
									    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
									
									        <Col  md={12} sm={24}>
										        <FormItem  label="统计关系所在单位">
										            {form.getFieldDecorator('company_statistic', {
										            rules: [{ required: true, message: '请输入统计关系所在单位！'}],
										            })(<Input  placeholder="请输入" />)}
										        </FormItem>
									        </Col>
									        <Col  md={12} sm={24}>
										        <FormItem  label="人员所属部门与警种">
										            {form.getFieldDecorator('staff_police', {
										            rules: [{ required: true, message: '请选择人员所属部门与警种！'}],
										            })(    
													      <TreeSelect
													      	showSearch
													        style={{ width: '100%' }}
													        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
													        treeData={staffPolice}
													        filterTreeNode={(input, treeNode) => 
													        	treeNode.props.title.toLowerCase().indexOf(input.toLowerCase()) >= 0
													        }
													        placeholder="请选择"
													      />
												    )}
										        </FormItem>
									        </Col>
									
									    </Row>
									    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
									
									        <Col  md={12} sm={24}>
										        <FormItem  label="工作单位及职务全称">
										            {form.getFieldDecorator('company_post', {
										            rules: [{ required: true, message: '请输入工作单位及职务全称！'}],
										            })(<Input  placeholder="请输入" />)}
										        </FormItem>
									        </Col>
									        <Col  md={12} sm={24}>
										        <FormItem  label="人员工作岗位">
										            {form.getFieldDecorator('work_post', {
										            rules: [{ required: true, message: '请选择人员工作岗位！'}],
										            })(    
													      <TreeSelect
													      	showSearch
													        style={{ width: '100%' }}
													        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
													        treeData={workPost}
													        placeholder="请选择"
													        filterTreeNode={(input, treeNode) => 
													        	treeNode.props.title.toLowerCase().indexOf(input.toLowerCase()) >= 0
													        }
													      />
												    )}
										        </FormItem>
									        </Col>
									
									    </Row>
									    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
									
									        <Col  md={12} sm={24}>
										        <FormItem  label="协管干部标识">
										            {form.getFieldDecorator('manage_cadre', {
										            rules: [{ required: true, message: '请选择协管干部标识！'}],
										            })(    
													    <Select showSearch style={{ width: '100%' }} placeholder="请选择">
														      <Option value="部级协管干部">部级协管干部</Option>
														      <Option value="省级协管干部">省级协管干部</Option>
														      <Option value="市级协管干部">市级协管干部</Option>
													    </Select>
												    )}
										        </FormItem>
									        </Col>
									        <Col  md={12} sm={24}>
										        <FormItem  label="是否是协管干部">
										            {form.getFieldDecorator('ismanage_cadre', {
										            rules: [{ required: true, message: '请选择是否是协管干部！'}],
										            })(    
													    <Select showSearch style={{ width: '100%' }} placeholder="请选择">
														      <Option value="空">空</Option>
														      <Option value="否">否</Option>
														      <Option value="是">是</Option>
													    </Select>
												    )}
										        </FormItem>
									        </Col>
									
									    </Row>
									    
									    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
									
									        <Col  md={12} sm={24}>
										        <FormItem  label="管理类别">
										            {form.getFieldDecorator('manage_type', {
										            rules: [{ required: true, message: '请选择管理类别！'}],
										            })(    
													    <Select 
													    showSearch 
													    style={{ width: '100%' }} 
													    placeholder="请选择"
													    filterOption={(input, option) => 
													     	option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
													    }
													    >
														      <Option value="1">中央管理干部</Option>
														      <Option value="2">省委党委管理干部</Option>
														      <Option value="3">市委党委管理干部</Option>
														      <Option value="3">县委党委管理干部</Option>
														      <Option value="4">其他</Option>
													    </Select>
												    )}
										        </FormItem>
									        </Col>
									
									    </Row>
									</TabPane>
    							<TabPane tab="其他情况" key="4">
									    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
									
									        <Col  md={24} sm={48}>
										        <FormItem  label="专长">
										            {form.getFieldDecorator('speciality')(<TextArea rows={4}/>)}
										        </FormItem>
									        </Col>

									    </Row>
									    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
									
									        <Col  md={24} sm={48}>
										        <FormItem  label="奖励综述">
										            {form.getFieldDecorator('reward',{
										            	rules: [{ required: true, message: '请输入奖励综述！'}],
										            })(<TextArea rows={4} />)}
										        </FormItem>
									        </Col>

									    </Row>
									    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
									
									        <Col  md={24} sm={48}>
										        <FormItem  label="年度考核综述">
										            {form.getFieldDecorator('check',{
										            	rules: [{ required: true, message: '请输入年度考核综述！'}],
										            })(<TextArea rows={4} />)}
										        </FormItem>
									        </Col>

									    </Row>
									    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
									
									        <Col  md={24} sm={48}>
										        <FormItem  label="履历">
										            {form.getFieldDecorator('record')(<TextArea rows={4}/>)}
										        </FormItem>
									        </Col>

									    </Row>
									  </TabPane>
									</Tabs>
							</Form>
            </Card>
          </Col>
        </Row>
      </GridContent>
      </PageHeaderWrapper>
    );
  }
}

export default StaffViewForm;
